<template>
	<div style="background-color: white;">
		
		<!--<el-card class="box-card">
	  		<div slot="header" class="clearfix">
	    		<span>提货编号：{{id}}</span>
	    	<el-button>已完成></el-button>
	  		</div>
			车牌号：{{carId}}<br>
			备注：{{remark}}<br>
			物料：{{materiel}}<br>
			提货码：{{ladingCode}}<br>
			预装数量：{{number}}
		</el-card>-->
		<!--<section style="padding: 1.1rem 1rem 0.6rem 1rem;">
			<section style="display: flex;justify-content: center;align-items: center;margin-bottom: 0.3rem;">
				<span style="flex: 7;color: #353535;text-align: left;font-size:1rem">提货编号：{{id}}</span>
				<span style="flex: 1.5;color: #979797;font-size:1rem">已完成</span>
				<mu-icon :size="18"  @click="" value="keyboard_arrow_right"  style="flex: 0.4;color: #979797;" />
			</section>
			<section style="display: flex;flex-direction: column;">
				<section class="card-strip" >
					<a class="circle" style="background-color: #43bfa5;"></a>
					<span>车牌号：{{carId}}</span>
				</section>
				<section class="card-strip" >
					<a class="circle" style="background-color: #f7945b;"></a>
					<span>备注：{{remark}}</span>
				</section>
				<section class="card-strip" >
					<a class="circle" style="background-color: #c457f1;"></a>
					<span>物料：{{materiel}}</span>
				</section>
				<section class="card-strip" >
					<a class="circle" style="background-color: #f75a7b;"></a>
					<span>提货码：{{ladingCode}}</span>
				</section>
				<section class="card-strip" >
					<a class="circle" style="background-color: #34a9e2;"></a>
					<span>预装数量：{{number}}</span>
				</section>
			</section>
		</section>-->
		
		<section style="border-top: 2px solid #ecebeb;padding: 1.1rem 1rem 0.6rem 1rem;display: flex;flex-direction: row;">
			<section style="display: flex;justify-content: center;align-items: left;flex: 7;flex-direction: column;">
				<span style="color: #353535;text-align: left;font-size:1rem;margin-bottom: 0.3rem;">提货编号：{{id}}</span>
				<section style="display: flex;flex-direction: column;">
				<section class="card-strip" >
					<!--<a class="circle" style="background-color: #43bfa5;"></a>-->
					<span>车牌号：{{carId}}</span>
				</section>
				<section class="card-strip" >
					<!--<a class="circle" style="background-color: #f7945b;"></a>-->
					<span>备注：{{remark}}</span>
				</section>
				<section class="card-strip" >
					<!--<a class="circle" style="background-color: #c457f1;"></a>-->
					<span>物料：{{materiel}}</span>
				</section>
				<!--<section class="card-strip" >
					<a class="circle" style="background-color: #f75a7b;"></a>
					<span>提货码：{{ladingCode}}</span>
				</section>-->
				<section class="card-strip" >
					<!--<a class="circle" style="background-color: #34a9e2;"></a>-->
					<span>预装数量：{{number}}</span>
				</section>
				</section>
			</section>
			
			
			<section style="flex: 2.5;">
				<span style="flex: 1.5;color: #f0b12a;font-size:1rem">已完成</span>
				
			</section>
			<section style="flex: 1;display: flex;align-items: center;">
				<section style="display: block;width: 2rem;height: 2rem;background-color: rgba(0,0,0,0.4);display: flex;align-items: center;justify-content: center;border-radius: 50%;">
					<mu-icon :size="22"   value="keyboard_arrow_right"  style="flex: 0.4;color: white;" />
				</section>
			</section>
		</section>
		
	</div>
</template>

<script>
	 export default {
	 	  data() {
      return {
      	carId:"鲁AX568Q",
      	remark:"2785 15966702746",
      	materiel:"石灰石",
      	ladingCode:"123456",
      	number:"10件"
      	
      	}
     },
    props: {
            id: {
        type: String,
        default: "00000"
      }
	}
 }
</script>

<style scoped>
  .card-strip{
  	display: flex;
  	flex-direction: row;
  	align-items: center;
  	margin: 0.2rem 0;
  }
  .circle{
	width: 0.5rem;	
	height: 0.5rem;
	border-radius: 50%;
	display: block;
	margin-right: 0.6rem;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>